<template>
	<view class="search-bar">
		<view class="zdy-input" @click="handSearch">
			<image src="/static/icon/search.png" mode=""></image>
			<text>{{ tips }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		doHor
	} from '@/apis/search.js'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'
	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo,
		getCityName: cityName
	} = storeToRefs(useStore)

	const handSearch = async () => {
		await handUser()
		uni.navigateTo({
			url: '/pages/search/index'
		})
	}

	let tips = ref("")
	const init = async () => {
		const data = await doHor()
		if (data.records.length > 0) {
			tips.value = `大家都在搜“${data.records[0].searchContent}”`
		} else {
			tips.value = '请输入搜索关键字'
		}
	}

	const handUser = () => {
		return new Promise((rel, rej) => {
			if (userInfo.value?.id) {
				return rel(true)
			}
			uni.navigateTo({
				url: '/pagesA/login/login'
			})
			rej('请先登录')
		})
	}

	init()
</script>

<style lang="scss" scoped>
	.search-bar {
		padding: 0 24rpx;
		position: relative;
		z-index: 101;
		background-color: #fff;

		.zdy-input {
			display: flex;
			height: 74rpx;
			align-items: center;
			background: #F5F5F5;
			border-radius: 38rpx;
			box-sizing: border-box;
			padding: 0 32rpx;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			text {
				margin-left: 22rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>